<script setup>
defineProps({
    Jiang: Array,
})
const emits = defineEmits(['jump'])
const add = (id) => {
  emits('jump', id)
}
</script>
<template>
    <div class="List" v-for="(item, index) in Jiang" :key="index" @click="add(item.id)">
        <span class="shu">{{ item.course_classify_title }}</span>
        <h3 class="title">{{ item.title }}</h3>
        <div class="Names">
            <div class="Name"  v-for="(item1,index1) in item.teacher.slice(0,2)" :key="index">
            <img :src="item1.avatar" alt="">
            <p>{{ item1.teacher_name }}</p>
        </div>
        </div>
        <div v-if="item.stock===''">

        </div>
        <div v-else>
            限{{item.stock}}人
        </div>
        <div class="mon">
            <div>
                {{item.sales_num}}人已报名
            </div>
            <div v-if="(item.price===0)" style="color:#26db6f">
              免费
            </div>
            <div v-else style="color:red">
                ￥{{(item.price/100)}}.00
            </div>
           

        </div>
    </div>
</template>

<style lang="scss" scoped>
.List {
    width: 100%;
    background-color: #fff;
    // background-color: red;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px 20px;
    margin-top: 20px;
    border-radius: 20px;
    box-shadow: 5px 5px 5px 5px #ccc;
     color: #000;
    .shu {
        position: absolute;
        left: 20px;
        top: 20px;
        background-color: red;
        display: inline-block;
        width: 130px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #fff;
        background: url() no-repeat;
        background-size: 100% 100%;
        // background-color: red;
    }

    .title {
        margin-top: 70px;
    }
    .Names{
        width: 100%;
        display: flex;
        height: 100px;
        overflow: hidden;
        .Name {
        // width: 100%;
        // height: 100px;
        // background-color: red;
        // width: 300px;
        display: flex;
        align-items: center;
        margin-left: 20px;

        img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
        }
        p{
            width: 100px;
        }
    }
    }
  

    .mon {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}
</style>